import {LOGIN_STATE_EXIT_LOGIN} from "../constant/Constant";
import {logD} from "../utils/LogUtils";
import {useRef, useState} from "react";

export function LoginState(props) {
    return (<div className="Login-Content" onClick={() => {
        props.onClick(props.state)
    }}>
        {props.state === 0 ? <a>登录</a> : (<div>
            <a>{props.state}</a>
            <a onClick={() => {
                props.onClick(LOGIN_STATE_EXIT_LOGIN)
            }}>退出</a>
        </div>)}
    </div>)
}

export function LoginBlock(props) {
    logD("LoginBlock show " + props)

    const usernameRef = useRef()
    const passwordRef = useRef()

    const [dismiss, setDismiss] = useState(false)

    function onCallLogin() {
        const username = usernameRef.current.value;
        const password = passwordRef.current.value;

        props.onCallLogin(username, password)
    }

    function onCallDismiss() {
        setDismiss(true)
        props.onCallDismiss()
    }

    return (!dismiss && <div className="Login-Block-Content">
        <a style={{float: "right"}} onClick={onCallDismiss}>X</a>
        <h3>登录</h3>
        <input type={"text"} ref={usernameRef} style={{width: "90%", height: "15%"}} placeholder="请输入用户名..."/>
        <br/>
        <input type={"password"} ref={passwordRef} style={{width: "90%", height: "15%", marginTop: "20px"}}
               placeholder="请输入密码..."/>
        <br/>
        <button onClick={onCallLogin}
                style={{
                    width: "90%",
                    height: "15%",
                    marginTop: "20px",
                    borderRadius: "10px",
                    backgroundColor: "rgb(104,227,209)",
                    border: "none",
                    fontSize: "20px",
                }}>登录
        </button>
    </div>)
}